<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<!--追加样式-->
<style>
    .mui-content{
        margin-bottom: 50px;
    }
    .mui-slider{
        height: 9em;
    }
    .iconfont{
        font-size: 120%;
    }
    .mui-tab-label{
        font-size: 70%;
    }
</style>
<body>

<header class="mui-bar mui-bar-nav">
    <!--<a href="javascript:" onclick="history.go(-1);" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
    <h1 class="mui-title">交流区</h1>
</header>
<div id="pullrefresh" class="mui-content" >
    <div class="mui-scroll" style="margin-bottom: 50px">
        <!--<div class="title">-->
            <!--这里是书友的一些评论，你可以在这里畅所欲言-->
        <!--</div>-->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" th:each="jiaoliu:${communicateDOList}">
                <a th:href="'/iphone/bookinfo/'+${jiaoliu.bookId}">
                    <img class="mui-media-object mui-pull-left" th:src="${jiaoliu.bookImg}">
                    <div class="mui-media-body">
                        <div th:text="${jiaoliu.bookName}"></div>
                        <p class="mui-ellipsis" th:text="${jiaoliu.author}">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                    </div>
                </a>
            </li>

        </ul>

    </div>
</div>
<!--底部导航栏-->
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item " href="/iphone">
        <span class="iconfont icon-geren1" ></span><br />
        <span class="mui-tab-label" >首页</span>
    </a>
    <a class="mui-tab-item mui-active" href="#">
        <span class="iconfont icon-jiaoliuweixuanzhong" ></span><br />
        <span class="mui-tab-label" >交流圈</span>
    </a>
    <a class="mui-tab-item" href="/iphone/stack">
        <span class="iconfont icon-kucun" ></span><br />
        <span class="mui-tab-label" >书库</span>
    </a>
    <a class="mui-tab-item" href="/iphone/user">
        <span class="iconfont icon-gerenzhongxin" ></span><br />
        <span class="mui-tab-label" >我的</span>
    </a>
</nav>
<!--<script src="/js/phone/mui.min.js"></script>-->
<div th:include="include :: footer"></div>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    mui('body').on('tap', 'a', function() {
        document.location.href = this.href;
    });
</script>
</body>

</html>